<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item label="时间">
            <el-date-picker
              v-model="dateRange"
              :clearable="false"
              :editable="false"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>


      </el-col>
      <el-col :span="24">
        <div class="chart-wrapper">
          <line-chart :chart-data="chartDataObj" :clear="clear" :height="'380px'"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { queryMoreParam } from "@/api/basic/hisMain";
  import LineChart from "./LineChart";

  const chartDataObj = {
    xAxisData: [],//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    yAxis:{},
    legendData: [],//['aa', 'bb'],
    series:[]/*[{
    name: 'aa', itemStyle: {
      normal: {
        color: '#FF005A',
        lineStyle: {
          color: '#FF005A',
          width: 2
        }
      }
    },
    smooth: true,
    type: 'line',
    data: [100, 120, 161, 134, 105, 160, 165],
    animationDuration: 2800,
    animationEasing: 'cubicInOut'
  },
  {
    name: 'bb',
    smooth: true,
    type: 'line',
    itemStyle: {
      normal: {
        color: '#3888fa',
        lineStyle: {
          color: '#3888fa',
          width: 2
        },
        areaStyle: {
          color: '#f3f8ff'
        }
      }
    },
    data: [120, 82, 91, 154, 162, 140, 145],
    animationDuration: 2800,
    animationEasing: 'quadraticOut'
  }]*/
  }

  export default {
    name:'RealChart',
    components: { LineChart },
    props: {
      pointParam: {
        type: Object
      },
      collectPoint: {
        type: Object
      }
    },
    data() {
      return {
        clear:true,
        chartDataObj: chartDataObj,
        paramName: this.pointParam.paramInfo.name,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: "",
        // 查询参数
        queryParams: {
          pointId:this.collectPoint.id,
          paramIds:this.pointParam.paramId,
          beginTime: undefined,
          endTime: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    watch:{
      pointParam(val) {
        this.queryParams.paramIds = this.pointParam.paramId;
        // this.queryParams.paramId = this.pointParam.paramId;
        this.paramName = this.pointParam.paramInfo.name;
        this.getList();
      },
      collectPoint(val) {
        this.queryParams.pointId = this.collectPoint.id;
      }
    },
    computed: {
      tabHt(){
        return this.$store.state.app.tableHeight.htp
      }
    },
    created() {
      this.mounted();
      this.getList();
    },
    methods: {
      mounted() {
        let nowDate = new Date();
        let befDate = new Date(nowDate.getTime() + 1 * 24 * 3600 * 1000);
        let byear = befDate.getFullYear();
        let bmonth = befDate.getMonth() + 1;
        let bday = befDate.getDate();
        let endTime = `${byear}-${bmonth}-${bday}`;
        // 向前推迟一周的时间点
        befDate = new Date(nowDate.getTime() - 0 * 24 * 3600 * 1000);
        byear = befDate.getFullYear();
        bmonth = befDate.getMonth() + 1;
        bday = befDate.getDate();
        let startTime = `${byear}-${bmonth}-${bday}`;
        this.dateRange = [startTime,endTime];
      },
      getList() {
        let _this=this

        queryMoreParam(this.addDateRange(this.queryParams, this.dateRange)).then(obj => {
          this.chartDataObj.xAxisData = []
          this.chartDataObj.yAxis = []
          this.chartDataObj.series = []
          this.chartDataObj.legendData = []
          let valsMap = obj.valsMap;
          let legendDataArr = obj.legendData;
          let paramIds = obj.paramIds;
          _this.chartDataObj.xAxisData = obj.xAxisData;
          paramIds.forEach(function(paramId,i) {
            let valsData = valsMap[paramId];
            _this.chartDataObj.yAxis.push({
              name: legendDataArr[i],
              type: "value",
              position: "right",
              //splitNumber: 10, // Y 轴分隔格数
              offset:i*30,
              splitLine: {
                // Y 轴分隔线样式
                show: true,
                lineStyle: {
                  //color: ["#f3f0f0"],
                  width: 2,
                  type: "solid"
                }
              },
              scale: true
            });
            _this.chartDataObj.series.push({
              name: legendDataArr[i],
              // smooth: true,
              type: 'line',
              yAxisIndex: i,
              itemStyle: {
                normal: {
                  // color: '#3888fa',
                  lineStyle: {
                    // color: '#3888fa',
                    width: 2
                  },
                  areaStyle: {
                    color: '#f3f8ff'
                  }
                }
              },
              data: valsData
            });
          });
          _this.chartDataObj.legendData=legendDataArr;
        });
        /*
        queryMoreParam(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          let obj = response.data;
          this.chartDataObj.xAxisData = []
          this.chartDataObj.series = []
          this.chartDataObj.legendData = []
          this.chartDataObj.yAxis = {
            type: "value",
            position: "left",
            //splitNumber: 10, // Y 轴分隔格数
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                //color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            },
            scale: true
          }
          _this.chartDataObj.xAxisData = obj.xAxisData;
          this.chartDataObj.series.push({
            name: this.paramName,
            // smooth: true,
            type: 'line',
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: obj.valsData
          });
          // map.put("xAxisData", xAxisData);
          // map.put("valsData", valsData);
          _this.chartDataObj.legendData.push(this.paramName);
        });*/

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      }
    }
  };
</script>
